<template>
  <div class="page-banner-add">
    <el-form label-width="150px" ref="formRef" :model="formData" :rules="formRule">
      <el-form-item label="图片链接" prop="link">
        <el-input v-model="formData.link"/>
      </el-form-item>
      <el-form-item label="图片提示" prop="alt">
        <el-input v-model="formData.alt"/>
      </el-form-item>
      <el-form-item label="选择图片">
        <el-upload
          class="avatar-uploader"
          :show-file-list="false"
          :http-request="onChange"
        >
          <img v-if="imageUrl" :src="imageUrl" class="avatar" />
          <el-icon v-else class="avatar-uploader-icon">
            <Plus />
          </el-icon>
        </el-upload>
      </el-form-item>
      <el-form-item label="图片base64" prop="img">
        <!-- 这个输入框的内容不是用户自己填写的，选择完图片后主动设置的 -->
        <el-input v-model="formData.img" disabled/>
      </el-form-item>
      <el-form-item label="图片base64">
        <el-button @click="onAdd" :loading="isLoading">添加</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import axios from "axios";
import { ElMessage } from "element-plus";
import {addBanner} from "@/api/banner.js"
export default {
    data(){
        return {
            //表单数据
            formData:{
                img:"",
                alt:"",
                link:""
            },
            formRule:{
                img:[{request:true}],
                alt:[{request:true}],
                link:[{request:true}],
            },
            //选择的图片的缩略图地址
            imageUrl:'',
            isLoading:false
        }
    },
  methods: {
    //选择完文件，覆盖默认的xhr行为
    onChange(options){
        //file文件对象
        console.log(options);
        //取出文件对象
        const file=options.file
        //做一些校验，文件类型
        const typeRight=['image/png','image/jpg','image/jpeg'].includes(file.type)
        //校验文件大小,限制2M以下（file.size是字节单位
        const sizeRight=file.size/1024/1024<2
        if(!typeRight ||!sizeRight){
            ElMessage.error("校验不通过，请检查文件类型或大小")
        }

        //做页面缩略图
        //1
        //this.imageUrl=window.URL.createObjectURL(file)
        //2
        //创建一个FileReader的实例
        const fileReader=new FileReader()
        ///异步操作，不能直接返回url
        //使用readAsDataURL方法获取文件的base64
        fileReader.readAsDataURL(file)
        //需要监听onload事件，读取成功后触发
        fileReader.onload=()=>{
            //获取fileReader.result结果
            //console.log(fileReader.result);//base64
            this.imageUrl=fileReader.result
            this.formData.img=fileReader.result
        }
        
    },
    async onAdd(){
        //表单校验
        try {
            await this.$refs.formRef.validate()
            //发送请求,防重点击
            this.isLoading=true
            addBanner(this.formData).then(()=>{
                console.log("添加成功");
            }).finally(()=>{
                this.isLoading=false
            })
            /* axios.post("http://localhost:3000/banners",
            this.formData,
            )
            .then((response)=>{
                const data=response.data
                this.tableData=data
                this.isLoading=false
            }) */
        } catch (error) {
            
        }

    }
  },
};
</script>

<style scoped>
.avatar-uploader .avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>

<style>
.avatar-uploader .el-upload {
  border: 1px dashed var(--el-border-color);
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
  border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  text-align: center;
}
</style>
